<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./期末考试.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <div class="box">
        <div class="shang">
            <table>
                <tr>
                    <th style="color: red;">天猫</th>
                    <th style="color: red;">淘宝严选</th>
                    <th style="color: red;">1688严选</th>
                    <th style="color: red;">司法拍卖</th>
                    <th style="color: rgb(67, 104, 12);">天猫超市</th>
                    <th style="color: cornflowerblue;">聚划算</th>
                </tr>
            </table>
        </div>
        <div class="zhong">
            <div class="lbt">
                <ul>
                    <li><img src="./image.png"></li>
                    <li><img src="./Snipaste_2025-01-13_09-15-40.png"></li>
                    <li><img src="./Snipaste_2025-01-13_09-16-02.png"></li>
                    <li><img src="./Snipaste_2025-01-13_09-16-11.png"></li>
                    <li><img src="./Snipaste_2025-01-13_09-16-19.png"></li>
                </ul>
                <span class="iconfont icon-next1 rbut"></span>
                <span class="iconfont icon-next lbut"></span>
                <ol>
                    <li index="0" style="background-color: red;"></li>
                    <li index="1"></li>
                    <li index="2"></li>
                    <li index="3"></li>
                    <li index="4"></li>
                </ol>
            </div>
            <div class="zs">
                <h3>百亿补贴 · 买贵必赔</h3><span class="iconfont icon-fanye3"></span>
                <img src="./Snipaste_2025-01-13_10-10-23.png">
                <p>百补-高蛋白鸡 <br> 肉干鸡胸干...</p>
                <li>已补 3 元</li>
                <font>￥13.8</font>
            </div>
            <div class="zy">
                <h3>掏江湖</h3><font>话题榜</font><span class="iconfont icon-fanye3"></span>
                <p>图片搜索和咸鱼也回来了<br>【有奖征集】打工人文学大赛<br>【社群招募】江湖侠客召集令...<br>淘宝网听劝改式改造第四期</p>
            </div><br>
            <div class="zz">
                <h3>淘宝厂货</h3><span class="iconfont icon-fanye3"></span>
                <img src="./Snipaste_2025-01-13_10-39-16.png" alt="">
                <font>￥3.3</font>
            </div>
            <div class="zxy">
                <h3>咸鱼市集</h3><span class="iconfont icon-fanye3"></span>
                <img src="./Snipaste_2025-01-13_10-45-55.png" alt="">
                <font>￥4.8起 超划算</font>
            </div>
            <div class="zyy">
                <h3>淘宝直播</h3><span class="iconfont icon-fanye3"></span>
                <img src="./Snipaste_2025-01-13_10-49-53.png" alt="" class="img1">
                <img src="./Snipaste_2025-01-13_10-49-58.png" alt="" class="img2">
            </div>
        </div>
    </div>
</body>
</html>
<script>
    var imgs=document.querySelectorAll('ul img')
    var lbt=document.querySelector('.lbt')
    var lbut=document.querySelector('.lbut')
    var rbut=document.querySelector('.rbut')
    var ul=document.querySelector('ul')
    var lis=document.querySelectorAll('ol li')
    var num=0
    var time;
    rbut.onclick=function(){
        num++
        if(num>imgs.length-1){
            num=0
        }
        ul.style.transform=`translate(${-num*300}px)`
        change(num)
    }
    lbut.onclick=function(){
        num--
        if(num<0){
            num=imgs.length-1
        }
        ul.style.transform=`translate(${-num*300}px)`
        change(num)
    }
    lbt.onmouseenter=function(){
        lbut.style.display='block'
        rbut.style.display='block'
        clearInterval(time)
    }
    lbt.onmouseleave=function(){
        lbut.style.display='none'
        rbut.style.display='none'
        start()
    }
    function start(){
       time=setInterval(function(){
        rbut.onclick()
       },1000)
    }
    start()
    for(i=0;i<lis.length;i++){
        lis[i].onclick=function(){
            var index=this.getAttribute('index')
            num=index
            ul.style.transform=`translate(${-num*300}px)`
            change(num)
        }
    }
    function change(index){
        for(i=0;i<lis.length;i++){
                lis[i].style.backgroundColor='white'
            }
            lis[index].style.backgroundColor='red'
    }
</script>